<template>
  <div class="main">
    <div class="box">
      <a class="item" href="#/articles">
        <img class="icon" src="../assets/icon1.png">
        <div>文章区</div>
      </a>
      <a class="item" href="#/novels">
        <img class="icon" src="../assets/novels.png">
        <div>小说</div>
      </a>
      <a class="item" href="#/reader">
        <img class="icon" src="../assets/novels.png">
        <div>阅读new</div>
      </a>
      <a class="item" href="#/read">
        <img class="icon" src="../assets/novels.png">
        <div>阅读</div>
      </a>
    </div>

    <footer class="bottom">
     {{url}} Powered by <a href="https://vuejs.org">vue.js </a> and <a href="https://github.com/ElemeFE/mint-ui">mint-ui</a> &copy;2018 <a href="https://www.v2ex.com/member/styang">styang</a>
    </footer>
  </div>

</template>
<script>

export default {
  metaInfo: {
    // if no subcomponents specify a metaInfo.title, this title will be used
    title: 'styang',
    // all titles will be injected into this template
    titleTemplate: '%s | 个人网站'
  },
  data(){
    return {
      url:''
    }
  },
  created(){
    this.url = location.host;
 }
}
</script>
<style scoped>
  .main{
    min-height: 100vh;
  }
  .box{
    display: flex;
    flex-wrap: nowrap;
    background: #ededed;
  }
  .item{
    flex: 1;
    padding-bottom: 20px;
    text-decoration: none;
    color: #666;
  }
  .item:visited{
    color: #666;
  }
  .icon{
    margin: 20px 0 5px;
  }
  .bottom{
    position: absolute;
    bottom: 0;
    width: 100%;
    background: #b0b0b0;
    color: #fff;
    padding: 10px 0;
  }
  .bottom a{
    color: #fff;
  }
</style>
